<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>03_元素属性操作</title>
		<!-- 
		  元素属性操作：针对固有属性，附加属性操作
		  元素      固定属性---清楚，元素是否可用属性【w3c元素出现设置属性】
		           附加属性---清楚：表单为主，附加属性checked,disabled....
		  prop()           --功能：与attr类似，附加属性，针对表单，默认选中
		            	   --功能：与removeAttr类似，附加属性，针对表单，移除选中	
		  removeProp()						
		
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<h1>prop()与 removeProp()函数使用</h1>
		<input type="checkbox" id="myCheckBox" checked/>
		<button id="getProBtn">获取属性</button>
		<button id="setProBtn">设置属性</button>
		<button id="removeProBtn">移除属性</button>
		<div id="output"></div>
		<!-- 复选框，默认选择   Id="myCheckBox" 
		     三个按钮  id="getProBtn"     获取属性
			          id="setProBtn"     设置属性
					  id="removeProBtn"  移除属性
			弹出文本： div  id="output"		  
		-->
		<script>
			/* prop()    点击---获取属性--打印复选框的值
			                             “复选框的值是：”+变量
			   prop()---input元素---checked属性--属性值bool[true,false]							 
			 */
			$("#getProBtn").click(function(){
				//prop() 获取元素的附加属性--input中的checked
				var isChecked=$("#myCheckBox").prop("checked");
				$("#output").text("复选框的值是："+isChecked);
			});
			//prop("checked",false)  取消选中
			$("#setProBtn").click(function(){
				var isChecked=$("#myCheckBox").prop("checked",false);
				$("#output").text("复选框的值是：false");
			});
			//removeProBtn  取消选中--删除  checked属性
			$("#removeProBtn").click(function(){
				var isChecked=$("#myCheckBox").removeProp("checked");
				$("#output").text("复选框的属性已经移除~");
			});
		</script>
	</body>
</html>